<template>
	<view class="container login">
		<view class="title">
			登录
			<text>无需注册，输入手机号即可</text>
		</view>
		<view class="_marginTop">
			<view class="tel">
				<u-input v-model="form.phone" type="text" placeholder="请输入手机号码" />
				<button type="default" class="hqyzm">获取验证码</button>
			</view>
			<view style="margin-top: 50rpx;">
				<u-input v-model="form.yzm" type="num" placeholder="请输入短信验证码" />
			</view>
		</view>
		<view class="_marginTop">
			<u-button type="primary" @click="goLogin">登录</u-button>
		</view>
		<view class="terms">
			<u-checkbox-group>
				<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle">
					<text class="tip">登录即视为同意</text>
					<text class="tip" style="color: #002B56;" @click="goUserAgreement">《用户协议》</text>及
					<text class="tip" style="color: #002B56;" @click="goPrivacyPolicy">《隐私条款》</text>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		

		<view class="other_login">
			<view class="other_login_tit">
				————— 其他登录方式 —————
			</view>
			<view class="wx_login">
				<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<u-icon name="weixin-circle-fill" color="#002a58" size="90"></u-icon>
					<text>微信登录</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import API from "@/api/login.js"
	export default {
		name: 'login',
		onShow() {
			this.getCode();
		},
		data() {
			return {
				form: {
					code: '',
					phone: '',
					yzm: '',
					openid: '',
					sessionKey: '',
					headUrl:'',
					nickName:''
				},
			}
		},
		methods: {
			goUserAgreement(){
				uni.navigateTo({
					url: "./userAgreement"
				})
			},
			goPrivacyPolicy(){
				uni.navigateTo({
					url: "./privacyPolicy"
				})
			},
			getCode() { //获取code 
				wx.login({
					success: res => {
						console.log('code', res.code);
						this.form.code = res.code;
						let data = {
							code: res.code
						}
						API.postLoginCode(data).then(res => { //利用code获取openid和sessionKey
							console.log(res)
							this.form.openid = res.data.openid;
							this.form.sessionKey = res.data.sessionKey;
						})
					}
				})
			},
			goLogin() { //手机号验证码登录接口
				console.log("登录")
				uni.showLoading({
					title: '登录中...',
				})
				API.loginPhone(this.form).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.setStorageSync('token', res.data);
						this.getUserInfo(res.data);

					} else {
						uni.showLoading({
							title: res.message,
						})
					}
				})
			},
			getUserInfo(token) { // 利用token获取用户信息
				let data = {
					token: token
				}
				API.getUserInfo(data).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.setStorageSync('userInfo', res.data);
						uni.showLoading({
							title: '登录成功',
						})
						// uni.navigateBack({
						// 	delta: 1
						// })
						setTimeout(function(){
							uni.reLaunch({
								url:'/pages/index/index'
							})
						},1000)
						
					}
				})
			},
			getPhoneNumber(e) {
				console.log(e)
				console.log(e.detail.errMsg)
				console.log(e.detail.iv)
				console.log(e.detail.encryptedData)
				var ivObj = e.detail.iv
				var telObj = e.detail.encryptedData
				var codeObj = ""
				let data1 = {
					openid: this.form.openid,
					sessionKey: this.form.sessionKey,
					encryptedData: telObj,
					iv: ivObj,
					nickName:this.form.nickName,
					avatarUrl:this.form.headUrl
				}
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用户点击拒绝
					uni.showToast({
						title: "取消微信授权",
						icon: "none"
					});
					uni.navigateBack({
						delta: 1
					})
				} else {
					API.postLogin(data1).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: "微信登录授权成功",
								icon: "none"
							});
							uni.setStorageSync('token', res.data);		
							this.getUserInfo(res.data);
						} else {
							uni.showToast({
								title: "授权失败",
								icon: "none"
							});
						}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.container {
		padding: 40rpx;
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
	}

	.title text {
		color: #999;
		font-size: 28rpx;
		display: block;
		font-weight: normal;
		line-height: 60rpx;
	}

	._marginTop {
		margin-top: 100rpx;
	}

	.tel {
		position: relative;
	}

	button.hqyzm {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		width: auto;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
		color: #002a58;
		font-size: 28rpx;
		border: none;

	}
	button.hqyzm::after{
		border: none;
	}

	.login .u-input {
		background-color: #f8f8f8;
		padding: 10rpx 20rpx !important;
	}

	.other_login {
		text-align: center;
		margin-top: 80rpx;
	}

	.other_login_tit {
		font-size: 26rpx;
		color: #999;
		display: block;
		line-height: 80rpx;
		margin-bottom: 30rpx;
	}
    .wx_login button{
		background: none;
		border: none;
	}
	.wx_login button::after{ border: none;}
	.wx_login button u-icon{
		display: block;
		margin-top:30rpx;
	}
	.wx_login button text {
		color: #333;
		font-size: 32rpx;
		display: block;
		margin-top: -30rpx;

	}
	.terms{ margin-top: 20rpx;}
</style>
